<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //获取项目路径，并设置进"app_path"
    pageContext.setAttribute("app_path", request.getContextPath());
    pageContext.setAttribute("myInterface", "\"http://localhost:9002/user-curd/users\"");
%>
<!-- 使用EL表达式(${app_path})查出项目路径 -->
<!-- jquery 核心 JavaScript 文件 -->
<script src="${app_path}/static/js/jquery-3.5.1.min.js"></script>
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="${app_path}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="${app_path}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- Bootstrap alert 扩展 JavaScript 文件 -->
<script src="${app_path}/static/bootstrap-alert-extend/bootstrap-alert-extend.js"></script>


<div class="col-lg-10">

    <div class="page-header" style="margin-top: -20px;margin-bottom: 5px;">
        <h2>角色管理列表</h2>
    </div>

    <!--用户处理框-->
    <div class="panel panel-default">
        <div class="panel-body">

                <!--表格-->
                <%-- 用于显示角色信息的表格 --%>
                <table id="" class="table table-hover table-bordered table-striped">
                    <caption></caption>
                    <thead>
                    <tr>
                        <th >id</th>
                        <th >用户名称</th>
                        <th >角色名称</th>
                        <th >操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>小明</td>
                        <td>
                            <form>
                                <div class="form-inline">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox"> 系统管理员
                                        </label>
                                    </div>&nbsp;&nbsp;
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox"> 人事管理员
                                        </label>
                                    </div>&nbsp;&nbsp;
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox"> 普通用户
                                        </label>
                                    </div>
                                </div>
                            </form>
                        </td>
                        <td>
                            <button class="btn btn-primary btn-sm">修改</button>
                        </td>
                    </tr>

                    </tbody>
                </table>

            </div>
        </div>
</div>
</div>


<script type="text/javascript">
    //定义一些全局变量
    let totalRecords;
    let errInputClass = "has-error";


    //该方法用于构建用户数据表
    function build_user_table(result) {
        let $userTable = $("#user_curd_table tbody");
        $userTable.empty();//添加前需要先清空

        let userList = result.dataMap.pageInfo.list;//用户的信息表
        let tableSize = result.dataMap.pageInfo.pageSize;//数据表每行的数量
        let createNums = 0;//当前已创建数据行的数量

        //Jquery里的$.each()遍历中，index代表当前遍历的索引，item代表当前遍历的数据
        $.each(userList, function (index, item) {
            // showMsg = showMsg + index+":"+ item.id+":"+item.username+"\n";

            let $userIdTd = $("<td></td>").append(item.id);//创建id格并加入id数据
            let $usernameTd = $("<td></td>").append(item.username);//创建用户名格并加入用户名数据
            let $passwordTd = $("<td></td>").append(item.password);//创建密码格并加入密码数据



            let $userTr = $("<tr></tr>")//创建用户数据行并加入各种数据格子
                .append($userIdTd)
                .append($usernameTd)
                .append($passwordTd)

            $userTable.append($userTr);//将数据行加入表格中
            createNums++;//已创建数据行的数量加1
        })

        //构造空数据行
        for ( let i = createNums; i < tableSize ; i++) {
            let $userTr = $("<tr></tr>");//创建用户数据行并加入各种数据格子
            for (let j = 0; j < 7; j++) {
                let $nullTd = $("<td>&nbsp;</td>");//创建选框
                $userTr.append($nullTd);//加入选框
            }
            $userTable.append($userTr);//将数据行加入表格中
        }
    }

</script>

